<template>
    <div class="setting-box">
      <div class="setting-nav">
        <router-link to="/adminPage/setting/tips">
          <div v-if="this.component == 'tips'" class="nav" style="color: #00aca2; font-weight: bolder">警句管理</div>
          <div v-else class="nav" >警句管理</div>
        </router-link>
        <router-link to="/adminPage/setting/router">
          <div v-if="this.component == 'router'" class="nav" style="color: #00aca2; font-weight: bolder">接口管理</div>
          <div v-else class="nav">接口管理</div>
        </router-link>
      </div>
      <router-view @component="routerView"></router-view>
    </div>
</template>

<script>
    export default {
        name: "AdminSetting",
        data(){
            return{
                component:''
            }
        },
        mounted() {
            this.$emit("component","setting")
        },
        methods:{
            routerView(val){
                this.component = val
            },
        }
    }
</script>

<style scoped>
  .setting-box{
    width: 98.1%;
    min-height: 800px;
    border-radius: 3px;
    background-color: white;
    margin-bottom: 20px;
    padding: 10px 10px;
  }
  .setting-nav{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    margin: 0px auto;
    background-color: rgb(235, 239, 241);
  }
  .nav{
    float: left;
    /*width: 100px;*/
    height: 30px;
    padding: 0px 10px;
    margin-top: 5px;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 2px;
    background-color: #f8f8f8;
    color: #6c6c6c;
    transition: 0.2s;
    /*font-weight: bolder;*/
  }
  .nav:hover{
    background-color: #dedede;
  }
</style>
